<template>
	<div class="CollectAll"> 
		<headers></headers>
	<div class="Collect_cont">
		<div class="Nvatrigger">
			<span 
			v-for="(item,index) in list" 
			:class="{active:isShow===index}"
			@click="triggerClick(index)"
			> 
				{{item.name}}
			</span>
		</div>
		<div class="content">
			<ul class="content_one" v-if="isShow===1">
				<li>
					<i class="cont_img">
						<img alt="加载失败" src="">
					</i>
					<p class="cont_pone">黄河商品交易市场现 货发售运营中心</p> 
				</li> 
			</ul>

			<ul class="content_two" v-else>
				<li> 
					<p class="cont_pone">
						<span class="span_one">贵妃醉酒片</span>
						<span class="span_two"><font>605019</font><a>南京</a></span>
					</p>
					<p class="cont_ptwo">
						<span>查看盘评<i class="iconfont icon-mine_arrows_right"></i></span>
					</p>
				</li> 
			</ul>

		</div>


	</div> 
	</div>
</template>

<script type="text/javascript">
import headers from '../../components/other/header'
	export default{
		name:'CollectAll',
		components:{
			headers
		},
		data(){
			return{ 
				isShow:0,
				list:[
					{	 
						name:'藏品' 
					},
					{	
						 
						name:'交易所'
					}
				]
			}
		},
		methods:{
			triggerClick:function(index) {
				console.log(1); 
				this.isShow=index;
			}
		}
	}
</script>
<style scoped>
	.content_one{
		width: 100%;
		padding: 0.2rem 0;
		overflow: hidden; 
	}	
	.content_one li{
		width: 30%;
		display: inline-block;
		margin-left: 2.5%;
		float: left;
		margin-top:0.2666666667rem;
		text-align: center;
		padding: 0.2rem 0.1rem; 
		border:1px solid #ccc;
		/* min-height: 3.9rem; */
		background-color: #fff;
	}

	.content_one li .cont_img{
		display:inline-block;
		width:1.6rem;
		height: 1.6rem;
		border-radius:100%;
		border:0.0133333333rem solid #e2e2e2;
		overflow: hidden;
	}
	.content_one li .cont_pone{
		width:100%;
		text-align: center;
		font-size: 0.32rem;
		line-height: 0.4rem;
		margin-top: 0.16rem;
		min-height:0.8rem;
		vertical-align: middle;
	}
/* 藏品 */
	.content_two{
		width: 100%;
		padding: 0.2rem 0;
		overflow: hidden; 
		
	}
	.content_two li{
		width: 100%;
		margin-bottom: 0.2666666667rem;
		background-color: #fff;
		padding: 0.3333333333rem 0;
	}
	.content_two li .cont_pone{
		width:73%;
		display: inline-block;
		padding-left: 0.4rem;
	}
	.content_two li .cont_ptwo{
		width: 26%;
		display: inline-block;
		float: right;
		margin-top:5%;
		padding-right: 0.4rem;
	}
	.content_two li .cont_pone .span_one{
		width: 100%;
		display: block;
		overflow: hidden;
		font-size: 0.4rem;
		color: #666666;

	}

	.content_two li .cont_pone .span_two{
		width: 100%;
		display: block;
		overflow: hidden; 
		color: #666666;
		font-size: 0.3733333333rem;
		margin-top:0.1333333333rem;
		

	}
	.content_two li .cont_pone .span_two a{
		display: inline-block;
		font-size: 0.32rem;
		background-color: #578be1;
		padding: 0.1066666667rem 0.3333333333rem;
		border-radius: 0.04rem;
		margin-left:0.1333333333rem;
		color: #fff;
	} 
	
	.content_two li .cont_ptwo span{
		font-size: 0.32rem;
		color: #bbbbbb; 
		float: right;
	}
	.content_two li .cont_ptwo span i{
		margin-left: 0.1333333333rem;
		font-size: 0.2666666667rem;
	}
	


</style>